<div id='main'>
    <div class='row'>
        <form class="saveParams" method='POST' action="saveParams">
            <div class="col-12 cardPadding">
                <div class='card'>
                    <div class="card-header fw-bold">
                        <svg class="card_icon" fill="currentColor" viewBox="0 0 16 16">
                            <use xlink:href="icons.svg#mqtt" />
                        </svg><span data-i18n="p.mq.desc"></span>
                    </div>
                    <div class="card-body">
                        <div class='mb-2 form-check form-switch'>
                            <label class='form-check-label' for='MqttEnable' data-i18n="c.enable;p.mq.enb[title]">
                                <input data-r2v="enableMqtt" id="MqttEnable" class='form-check-input' type='checkbox'
                                    role="switch" name='MqttEnable' onclick="MqttInputDsbl(!this.checked)">
                            </label>
                        </div>
                        <div class='mb-2'>
                            <label for='server' data-i18n="p.mq.broker.n"></label>
                            <input data-r2v="serverMqtt" class='form-control' id='MqttServer' type='text'
                                name='MqttServer' minlength="1" maxlength="60"
                                pattern="^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$"
                                data-i18n="p.mq.broker.ph[placeholder];p.mq.broker.tt[title]" required>
                        </div>
                        <div class='mb-2'>
                            <label for='port' data-i18n="p.mq.port.n"></label>
                            <input data-r2v="portMqtt" class='form-control' id='MqttPort' type='number' name='MqttPort'
                                min="1025" max="65536" data-i18n="p.mq.port.ph[placeholder];p.mq.port.tt[title]"
                                required>
                        </div>
                        <div class='mb-2'>
                            <label for='user' data-i18n="c.user"></label>
                            <input data-r2v="userMqtt" class='form-control' id='MqttUser' type='text' name='MqttUser'
                                minlength="4" maxlength="30" data-i18n="p.mq.user.ph[placeholder];p.mq.user.tt[title]">
                        </div>
                        <div class='mb-2'>
                            <label for='pass' data-i18n="c.pass"></label>
                            <div class="input-group">
                                <input type="password" id="MqttPass" data-r2v="passMqtt" class="form-control"
                                    aria-describedby="tglPassViewVisibility" name="MqttPass" minlength="4"
                                    maxlength="50" data-i18n="p.mq.pass.ph[placeholder];p.mq.pass.tt[title]">
                                <button class="btn inline_btn" type="button" id="tglPassViewVisibility"
                                    onclick="tglPassView(this)">
                                    <svg viewBox="0 0 16 16" class="inline_icon">
                                        <use xlink:href="icons.svg#eye-fill"></use>
                                    </svg>
                                </button>
                            </div>
                        </div>
                        <div class='mb-2'>
                            <label for='topic' data-i18n="p.mq.topic.n"></label>
                            <input data-r2v="topicMqtt" class='form-control' id='MqttTopic' type='text' name='MqttTopic'
                                minlength="5" maxlength="50" pattern="^[a-zA-Z0-9]+([a-zA-Z0-9_\-\/]*[a-zA-Z0-9]+)?$"
                                data-i18n="p.mq.topic.ph[placeholder];p.mq.topic.tt[title]" required>
                        </div>
                        <div class='mb-2'>
                            <label for='interval' data-i18n="p.mq.interval.n"></label>
                            <input data-r2v="intervalMqtt" class='form-control' id='MqttInterval' type='number' min="10"
                                max="36000" name='MqttInterval'
                                data-i18n="p.mq.interval.ph[placeholder];p.mq.interval.tt[title]" required>
                        </div>
                        <div class='mb-2'>
                            <label for='mqttReconnect' data-i18n="p.mq.reconnect.n"></label>
                            <input data-r2v="mqttReconnect" class='form-control' id='mqttReconnect' type='number'
                                min="1" max="90" name='mqttReconnect'
                                data-i18n="p.mq.reconnect.ph[placeholder];p.mq.reconnect.tt[title]" required>
                        </div>
                        <div class='mb-2 form-check form-switch'>
                            <label class='form-check-label' for='discovery' data-i18n="p.mq.disc.n;p.mq.disc.tt[title]">
                                <input data-r2v="discoveryMqtt" class='form-check-input' id='MqttDiscovery'
                                    type='checkbox' role="switch" name='MqttDiscovery'>
                            </label>
                        </div>
                        <br>
                        <div class="col-12 d-flex justify-content-center"><button type="submit"
                                class="btn btn-outline-primary col-6" name='save' data-i18n="c.save"></button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>